@import "../../styles/index.scss";

$anchor-prefix-cls: "anchor";

.#{$anchor-prefix-cls} {
  // position: sticky;
  display: inline-flex;
  width: 100%;
  line-height: 35px;
  background: #fff;
  z-index: $menu-zIndex - 50;
  border-bottom: 1px solid $black-10;
  box-sizing: border-box;
  // transition: all .3s;
  &.is-fixed {
    position: fixed;
    width: 816px;
    left: 24px;
    top: 48px;
    margin: 0;
    box-shadow: 0 9px 15px -7px $black-10;
  }
  &-item {
    position: relative;
    text-decoration: none;
    color: inherit;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      color: $blue;
    }
    &:after {
      opacity: 0;
      content: "";
      position: absolute;
      width: 100%;
      height: 4px;
      bottom: 0;
      left: 0;
      background: $blue;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      transform: translateX(100%);
      // transition: all 0.3s linear;
    }
  }
  .is-active {
    color: $blue;
    &:after {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .is-active ~ .#{$anchor-prefix-cls}-item {
    &:after {
      transform: translateX(-100%);
    }
  }
}
